<!--  -->
<template>
  <el-form
    ref="form"
    :model="formData"
    label-width="120px"
    size="mini"
    label-position="right"
    :rules="rules"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="报修人" prop="repairPeople">
          <el-input v-model="formData.repairPeople" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报修人电话" prop="repairPeoplePhone">
          <el-input v-model="formData.repairPeoplePhone" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="故障分类" prop="faultType">
      <FaultTypeSelect v-model="formData.faultType" style="width: 100%" />
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="预计工时" prop="expectedTime">
          <el-input
            v-model="formData.expectedTime"
          >
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="指派人员" prop="assignedPeople">
          <UserSelect v-model="formData.assignedPeople" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="紧急程度" required>
      <dic-radio v-model="formData.degree" dic-key="gradeUrgency" />
    </el-form-item>
    <el-form-item label="影响范围" required>
      <dic-radio v-model="formData.rangeType" dic-key="faultScope" />
    </el-form-item>

    <el-form-item label="报修时间" prop="time">
      <el-date-picker
        v-model="formData.time"
        class="w-100"
        type="date"
        placeholder="选择日期时间"
        value-format="yyyy-MM-dd"
      />
    </el-form-item>

    <el-row>
      <el-col :span="24">
        <el-form-item label="报修科室" prop="department">
          <CascaderDepartment v-model="formData.department" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="故障描述" prop="faultMemo">
      <!-- <el-row>
        <el-col :span="19">
          <el-input v-model="formData.faultMemo" />
        </el-col>
        <el-col :span="5" style="text-align: right">
          <el-button type="primary">引用</el-button>
        </el-col>
      </el-row> -->
      <el-autocomplete
        v-model="formData.faultMemo"
        :debounce="1000"
        type="textarea"
        value-key="title"
        :rows="2"
        :fetch-suggestions="querySearch"
        style="width:calc(100% - 0px); text-align: left;margin-right:5px;"
        @select="onSelectSuggestionKnowledge"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { mixins_base, } from '@/minxins/project';
import ProjectAPI from '@/apis/project';
import moment from 'moment';
import { phone_rules, } from '../../config/form.rules';
import { arrayToString, } from '@/utils/common';
import KnowledgeBaseRetrievalApi from '@/apis/knowledgeBase/retrieval/index';
export default {
  components: {
    FaultTypeSelect: () => import('@/views/reportFault/sharedComponents/select/faultTypeSelect.vue'),
    DicRadio: () => import('@/views/components/dictionary/dicRadio.vue'),

  },
  mixins: [mixins_base],
  props: {
    isVote: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        // 报修人
        repairPeople: '',
        // 报修人电话
        repairPeoplePhone: '',
        // 故障分类
        faultType: '',
        // 故障描述
        faultMemo: '',
        // 报修时间
        time: '',
        // 指派人
        assignedPeople: '',
        // 报修科室
        department: null,
        // 预计工时
        expectedTime: '',
        // 紧急程度
        degree: 1,
        // 影响范围
        rangeType: 1,
      },
      rules: {
        repairPeople: [{
          required: true,
          message: '报修人不能为空',
          trigger: 'blur',
        }],
        repairPeoplePhone: [{
          required: true,
          trigger: 'blur',
          message: '电话不能为空',
        }, phone_rules],
        faultType: [{
          required: true,
          message: '故障分类',
        }],
        department: [{
          required: true,
          trigger: 'change',
          message: '请选择报修科室',
        }],
        faultMemo: [{
          required: true,
          trigger: 'blur',
          message: '请填写故障描述',
        }],
        time: [{
          required: true,
          trigger: 'blur',
          message: '请选择报修时间',
        }],
        assignedPeople: [{
          required: true,
          trigger: 'change',
          message: '请选择指派人员',
        }],
        expectedTime: [{
          required: true,
          trigger: 'blur',
          type: 'number',
          message: '工时只能为数字',
          transform: (v) => Number(v),

        }, {
          trigger: 'blur',
          validator: (r, v, cb) => {
            if (parseFloat(v) <= 0 || v === '') {
              return cb(new Error('工时不能为空或者小于0'));
            }
            cb();
          },
        }],
      },
    };
  },

  mounted() {
    if (Object.values(this.researchInfo).length) {
      this.formData.repairPeople = this.researchInfo.sponsor;
      this.formData.repairPeoplePhone = this.researchInfo.phone;
      this.formData.time = this.researchInfo.startTime;
      this.formData.department = this.researchInfo.organizer || null;
      this.formData.faultMemo = this.researchInfo.title + this.researchInfo.remark || '';
    }
  },
  methods: {

    submit() {
      if (this.isVote === false) {
        return this.$message.error('投票中，无法提交');
      }
      return new Promise((r, j) => {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const submitArguments = {
              itemCode: this.itemCode,
              user: this.formData.repairPeople,
              phone: this.formData.repairPeoplePhone,
              createTime: moment(this.formData.time).format('YYYY-MM-DD'),
              deptId: this.formData.department,
              faultRemark: this.formData.faultMemo,
              sendUser: this.formData.assignedPeople,
              reqTime: this.formData.expectedTime * 60,
              faultType: arrayToString(this.formData.faultType),
              degree: this.formData.degree,
              learningId: this.formData.learningId,
              rangeType: this.formData.rangeType,
            };
            try {
              await ProjectAPI.demand.submitReview(submitArguments, 'order');
              r(true);
            } catch (e) {
              j(e);
            }
          } else {
            j('表单校验未通过');
          }
        });
      });
    },
    async querySearch(queryString, cb) {
      const { list, } = await KnowledgeBaseRetrievalApi.list({
        query: queryString,
        pageSize: 9999,
      });
      cb(list);
    },
    onSelectSuggestionKnowledge(item) {
      this.formData.faultRemark = item.faultMemo;
      this.formData.learningId = item.id;
      this.$refs.form.clearValidate();
    },
  },
};
</script>
<style lang='scss' scoped>
.w-100 {
  width: 100%;
}
</style>
